<template>
    <div>
        <van-nav-bar title="首页" />
        <van-search v-model="value" shape="round" placeholder="请输入搜索关键词" @click="onSanch"/>
        <!-- 导航内容 -->
        <div>
            <van-grid>
                <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
            </van-grid>
            <van-grid>
                <van-grid-item v-for="item in catitems" :icon="item.image_src" :text="item.name" />
            </van-grid>

        </div>
        <!-- 瀑布流 -->
         <div class="list">
            <div style="width: 135px;height: 180px; background: pink;"><p>九成新游戏电脑便宜卖...<br>￥4799</p></div>
            <div style="width: 135px;height: 140px; background: pink;"><p>360度旋转置物架厨房卫生...<br>￥99</p></div>
            <div style="width: 135px;height: 190px; background: pink;"><p>智能拖地机器保障...<br>￥799</p></div>
            <div style="width: 135px;height: 160px; background: pink;"><p>清凉夏季专属...<br>￥47</p></div>
            <div style="width: 135px;height: 130px; background: pink;"><p>污渍消除...<br>￥47</p></div>
            <div style="width: 135px;height: 120px; background: pink;"><p>超值套餐包邮...<br>￥99</p></div>
           
           
            
         </div>






    </div>
</template>

<script setup>
import { ref } from 'vue';
const onSanch=()=>{
    router.push('/qsearch')
}
import { catitemsApi } from '@/api/api';
import router from '@/router';
let catitems = ref([])
catitemsApi().then(res => {
    console.log('导航数据', res)
    catitems.value = res.data.message
})

</script>

<style lang="scss" scoped>
.list{
    column-count: 2;
    column-gap: 20px;
    div{
        display: inline-block;
        margin: 10px;
        width: 100%;
    }
    p{
        margin-top: 120px;
        background: #d0cece;
        width: 135px;
        height: 70px;
        
    }
}

</style>